<link href="assets/css/bootstrap-treeview.min.css" rel="stylesheet" />
<link href="assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<style>
	.tt-icon-btn {
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		border-radius: 50%;
		font-size: 14px;
		padding: 4px;
		color: rgb(170, 170, 170);
		border: 1px solid rgb(170, 170, 170);
		display: inline-block;
	}

	.tt-icon-btn:hover {
		border: 2px solid #F36A5A;
		color: #F36A5A;
		padding: 3px;
	}

	.tt-icon-md {
		font-size: 16px;
		width: 26px;
		height: 26px;
	}

	.tt-icon-lg {
		font-size: 20px;
		width: 30px;
		height: 30px;
	}

	.tt-clk-tag {
		cursor: pointer;
		margin-top: auto;
		margin-bottom: auto;
	}

	::-webkit-input-placeholder {
		color: #CCC;
	}

	:-moz-placeholder {
		color: #CCC;
	}

	:-ms-input-placeholder {
		color: #CCC;
	}

	.quickaddbox,
	.subtask-wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding-bottom: 10px;
		padding-top: 10px;
	}

	.subtask-wrapper {
		border-bottom: 1px solid #EEEEEE;
		cursor: pointer;
	}

	.subtask-wrapper:hover {
		box-shadow: 0 0 0,
		0 -2px -11px #CCCCCC,
		0 2px 1px #CCCCCC, 
		0 0 0;
		background-color:#EEEEEE;
	}

	.qbox-fix {
		flex-shrink: 0;
	}

	.qbox-shrink {
		flex-shrink: 1;
		flex-grow: 1;
	}

	.qbox-shrink input[type="text"] {
		width: 100%;
		border-style: none;
		outline: none;
		word-wrap: break-word;
		resize: none;
		margin: 0;
		padding: 0;
	}

	.qbox-nogrow {
		flex-grow: 0;
	}

	.subtask-imps {
		width: 80px;
		text-align: center;
		vertical-align: middle;
		background-color: blue;
	}
	.subtask-deadline{
		text-align: center;
		width:100px;
	}
	.subtask-owner{
		text-align: center;
		width:100px;
	}

	.subtask-title-grp {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.subtask-toolbox {
		display: inline;
	}

	.subtask-title {
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: nowrap;
		padding-left:5px;
		padding-right:5px;
	}

	.subtask-progress{
		width:102px;
		padding-left:5px;
		padding-right:5px;
	}

	.task-subtask-row{
		margin-bottom:20px;
	}

	.meta-btn{
		display: none;
		color:#CCCCCC;
		cursor: pointer;
	}

	.meta-btn:hover{
		color:#F36A5A;
	}

	.subtask-wrapper:hover .meta-btn{
		display: inline-block;
	}

	#userbook,
	#subuserbook,
	#addExeDiv,
	#addRdrDiv {
		-moz-box-shadow: 5px 5px 2px #888888;
		box-shadow: 5px 5px 2px #888888;
		z-index: 100;
		top: 20px;
		left: 0px;
		position: absolute;
		width: 280px;
		height: 300px;
		overflow: auto;
		display: none;
		background-color: white;
		border: 1px solid #CCCCCC;
	}

	#addExeDiv,
	#addRdrDiv {
		left: 0;
		top: 20px;
	}

	#subuserbook {
		right: 0;
		top: 20px;
	}

	#tDescrEditor {
		overflow: auto;
		height: 200px;
		border-style: none;
		outline: none;
		word-wrap: break-word;
		resize: none;
		border: none;
		margin-bottom: 10px;
	}

	.task-detail-wrapper {
		display: flex;
		flex-direction: column;
		line-height: 20px;
		box-sizing: border-box;
	}

	.task-detail-header {
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		border-bottom: 1px solid rgb(221, 221, 221);
		vertical-align: middle;
		height: 51px;
	}

	.task-detail-header-left,
	.task-detail-header-right {
		flex-basis: 0px;
		flex-grow: 1;
		flex-shrink: 1;
		line-height: 50px;
		height: 50px;
		vertical-align: middle;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.task-detail-body {
		box-sizing: border-box;
		padding: 30px 40px;
	}

	.task-detail-row {
		box-sizing: border-box;
		margin-bottom: 30px;
		padding-left: 10px;
	}

	.subtask-list {
		color: rgb(130, 130, 130);
	}

	.task-item {
		box-sizing: border-box;
		position: relative;
	}

	.task-item-wrapper {
		align-items: center;
		border-bottom-color: rgb(238, 238, 238);
		border-bottom-style: solid;
		border-bottom-width: 1px;
		box-sizing: border-box;
		cursor: pointer;
		display: flex;
		flex-direction: row;
		position: relative;
		-webkit-box-align: center;
		-webkit-box-direction: normal;
	}

	.task-item-wrapper:hover {
		box-shadow: 2 2 2 #888888;
		-moz-box-shadow: 2 2 2 #888888;
		-webkit-box-shadow: 2 2 2 #888888;
	}

	.task-cell-progress {
		box-sizing: border-box;
		width: 100px;
	}

	.task-cell-title {
		display: flex;
		flex-basis: 0px;
		flex-direction: row;
		flex-grow: 1;
		flex-shrink: 1;
		min-height: 38px;
		line-height: 38px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-left: 10px;
		vertical-align: middle;
	}

	.task-cell-metadata {
		box-sizing: border-box;
		flex-shrink: 0;
		line-height: 20px;
	}

	#taskListWrapper {
		padding-left: 15px;
		padding-right: 15px;
	}

	.task-view-bar {
		margin-bottom: 15px;
		border-bottom: 1px solid #CCCCCC;
		vertical-align: middle;
	}

	.task-main-content {
		vertical-align: center;
	}

	.task-shortcut,
	.task-shortcut-with-lbl {
		font-size: 20px;
		color: #CCCCCC;
		text-decoration: none;
		cursor: pointer;
		vertical-align: middle;
	}

	.task-shortcut:hover,
	.task-shortcut-with-lbl:hover {
		font-size: 20px;
		color:#F36A5A;
		text-decoration: none;
		cursor: pointer;
		text-shadow: 1px 1px 1px #999999;
	}

	.task-shortcut-with-lbl i {
		font-style: normal;
		font-size: 16px;
		cursor: pointer;
		vertical-align: middle;
		margin-top: -4px;
	}

	.task-main-title {
		font-size: 18px;
		padding: 10px 0;
	}

	.task-main-descr,
	.task-executor-row,
	.task-reader-row,
	.task-subtask-row {
		padding-left: 60px;
		padding-right: 60px;
	}

	.task-props-label {
		display: block;
		padding: 10px 0;
		color: #888888;
	}

	.task-props-label .fa {
		font-size: 18px;
		color: #CCCCCC;
	}

	.task-props-label i {
		font-style: normal;
		margin-left: 5px;
	}

	.task-props {
		padding-left: 21px;
	}

	#progressDiv {
		padding:15px;
	}

	.task-main-title .btn-edit {
		display: none;
		color: #CCCCCC;
		cursor: pointer;
	}

	.task-main-title:hover .btn-edit {
		display: inline;
	}

	.btn-edit:hover {
		color:#F36A5A;
	}

	.avatar-sm,
	.avatar-md,
	.avatar-lg {
		width: 48px;
		height: 48px;
		border: 3px solid transparent;
		cursor: pointer;
	}

	.avatar-lg {
		width: 80px;
		height: 80px;
	}

	.avatar-md {
		width: 54px;
		height: 54px;
	}

	.avatar-md:hover,
	.avatar-lg:hover {
		border: 3px solid #DDDDDD;
	}

	.subtask-item {
		cursor: pointer;
		line-height: 40px;
		box-shadow: 0 2px 0 white;
	}

	.subtask-item:hover {
		box-shadow: 0 1px 1px #CCCCCC;
	}

	.task-feedback-box,
	.task-feedback-form {
		margin-left: 22px;
		margin-right: 22px;
	}

	.feedback-item,
	.feedback-editor {
		margin-bottom: 10px;
		border-bottom: 1px solid #cccccc;
	}

	.feedback-item {
		padding-bottom: 20px;
	}

	.feedback-props {
		line-height: 24px;
		margin-left: 70px;
		margin-top: 2px;
	}

	.feedback-time {
		color: #666666;
		background-color:#EEEEEE;
		font-size:10px;
		padding:2px;
		margin: 0 5px;
		border:1px solid #AAAAAA;
		border-radius: 2px 2px 2px;
	}

	#feedText {
		outline: none;
		border: 0;
		background-color: #EEEEEE;
		height: 32px;
		padding: 6px;
		overflow: auto;
		resize: none;
		width: 85%;
		margin-left: 70px;
		margin-right: 70px;
		border-radius: 2px 2px 1px;
	}

	#feedText:focus {
		border: 1px solid darkseagreen;
		height: 120px;
		background-color: white;
	}

	.fileinput-button {
		position: relative;
		overflow: hidden;
		display: inline-block;
	}

	.fileinput-button input {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		opacity: 0;
		-ms-filter: 'alpha(opacity=0)';
		font-size: 200px !important;
		direction: ltr;
		cursor: pointer;
	}

	#dateValue,
	#targetUserName {
		margin: 3px;
	}
	/* Fixes for IE < 8 */

	@media screen\9 {
		.fileinput-button input {
			filter: alpha(opacity=0);
			font-size: 100%;
			height: 100%;
		}
	}
</style>
<div id="page-inner">
	<div class="row">
		<div id="taskListWrapper">
			<div class="panel panel-default">
				<div class="panel-body">
					<div class="quickaddbox">
						<div class="qbox-fix">
							<a id="targetUser" role="button" style="position:relative"><span class="fa fa-user-plus tt-icon-btn" title="指定执行人"></span><div id="userbook">
								<div id="treeview-checkable"></div>
							</div></a><span class="label label-primary tt-clk-tag" id="targetUserName" title="执行人，点击可删除"></span>
							<a role="button" class="date form_datetime" data-link-field="newTaskDate"><span class="fa fa-calendar-plus-o tt-icon-btn" id="btnNewDate" title="选择截止日期"></span></a>
							<span class="label label-primary tt-clk-tag" id="dateValue" title="指定的完成时间，点击可清除"></span>
							<input type="hidden" id="newTaskDate" value="" />
						</div>
						<div class="qbox-shrink">
							<input id="newTaskTitle" type="text" placeholder="添加新任务，按回车键（Enter）保存" />
						</div>
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-body">
					<table class="table table-hover" id="taskListTable">
						<thead>
							<tr>
								<th></th>
								<th><span class="fa fa-tasks"></span> 任务标题</th>
								<th><span class="fa fa-rocket"></span> 进度</th>
								<th><span class="fa fa-user-o"></span> 创建人</th>
								<th><span class="fa fa-clock-o"></span> 完成日期</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap-treeview.min.js"></script>
<script src="assets/dataTables/datatables.min.js"></script>
<script src="assets/js/bootstrap-slider.min.js"></script>
<script src="assets/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script src="assets/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script src="assets/js/tasklib.js"></script>
<script src="assets/js/tasklist.js"></script>